<template>
	<div class="container">
		<view class="total flex-space-between">
			<text>
				共计
				<text class="blue">{{ totalNum }}</text>
				台
			</text>
			<view class="type" @click.stop="changeEChartType">
				筛选
				<text class="iconfont icon-xiajiantou"></text>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click.stop="toDetail(item)">
				<view class="item-title">
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" class="title" title="商户名称："
						:value="item.merchName" />
				</view>
				<view class="item-content">
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="代理商编号："
						:value="item.agentNo" v-if="false"/>
					<view class="purple-bg">
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="所属代理商："
						:value="item.agentName" />
					</view>
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="商户编号："
						:value="item.merchNo" v-if="false"/>
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="绑定时间："
						:value="item.bindTime" />
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="产品政策："
						:value="item.policyName" />
					<u-cell-item v-if="item.cond!=-2" :arrow="false" hover-class="none" :border-bottom="false" title="达标状态："
						:value="item.cond | condType" />
				</view>
				<view class="register-btn-box">
					<view class="btn-box" @click.stop="toUpdateFee(item)">
						修改费率
					</view>
					<view class="btn-box" @click.stop="toFeeRateDetail(item)">
						查看费率
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="filterPopup" mode="top" :border-radius="20">
			<div class="filter-body">
				<!-- <view class="f-title">筛选条件</view> -->

				<div class="filter-content">


					<u-field :clearable="false" label="商户搜索：" v-model="query.merchName" input-align="left"
						:label-width="170" placeholder="请输入商户编号/商户名称/法人姓名">
						<text class="iconfont icon-xiajiantou" slot="right" @click="merchHandel"></text>
					</u-field>
					<u-field label="代理商编号：" v-model="query.agentNo" :label-width="170" input-align="left"
						placeholder="请输入代理商编号"></u-field>
					<u-field :disabled="true" label="产品政策：" :value="query.policyName" input-align="left"
						:label-width="170" placeholder="请选择" @click="showPicker = true">
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right"
							@click="showPicker = true"></text>
					</u-field>
					<u-field :disabled="true" label="类型：" :value="agentTypeName" input-align="left" :label-width="170"
						placeholder="请选择" @click="showAgentTypePicker = true">
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right"
							@click="showAgentTypePicker = true"></text>
					</u-field>
					<view class="duble-input flex-space-between">
						<text class="text">绑定日期</text>
						<u-field label="" v-model="query.bindTimeStart" :disabled="true" :label-width="0"
							:border-bottom="false" input-align="center" placeholder="请选择"
							@click="chooseTime('start')"></u-field>
						-
						<u-field :disabled="true" label="" :value="query.bindTimeEnd" :border-bottom="false"
							input-align="center" :label-width="0" placeholder="请选择" @click="chooseTime('end')" />
					</view>
				</div>
				<div class="footer-btn">
					<div class="btn-left"><button class="reset" size="large" type="warn"
							@click="resetHandle">重置</button></div>
					<div class="btn-right"><button class="myBtn" round size="large" @click="queryHandle">搜索</button>
					</div>
				</div>
			</div>
		</u-popup>
		<u-picker title="政策筛选" v-model="showPicker" mode="selector" :range="policyList" range-key="policyName"
			confirm-color="#4888FB" @confirm="onPolicyConfirm" @cancel="showPicker = false" />
		<u-picker title="类型" v-model="showAgentTypePicker" mode="selector" :range="agentTypeList" range-key="name"
			confirm-color="#4888FB" @confirm="onAgentTypeConfirm" @cancel="showAgentTypePicker = false" />
		<u-picker title="商户筛选" v-model="showMerch" mode="selector" :range="myMerchList" range-key="merchName"
			confirm-color="#4888FB" @confirm="onMerchConfirm" @cancel="showMerch = false" />
		<u-picker mode="time" v-model="timePicker" :default-time="defaultTime" :params="params" title="选择年月"
			@confirm="pickerConfirmHandle" start-year="2021" @cancel="timePicker = false" confirm-color="#4888FB" />
		<uni-load-more :status="loadMore"></uni-load-more>
	</div>
</template>

<script>
	import {
		formDateToString,
		getCurrentMonthFirst1,
		getNowMonthNoDate,
		getCurrentMonthLast,
		getMonthFirst,
		getMonthLast
	} from '_c/utils/date';
	
	import {
		merchBindTermList as termList,
		getCtTermById
	} from '_a/merchRateChange';
	import loadMoreData from '@/mixins/loadmore';
	import {
		merchList,
		preMerchList,
		merchBindTermList,
		merchGetByName
	} from '_a/merch';
	export default {
		mixins: [loadMoreData],
		data() {
			return {
				list: [],
				query: {
					bindTimeStart: '',
					bindTimeEnd: '',
					agentType: 1,
					// timeDate: getNowMonthNoDate(new Date()),
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				timePicker: false,
				filterPopup: false,
				showPicker: false,
				totalNum: 0, // 总数量
				chooseType: 'start', //选择时间类型
				defaultTime: '',
				showMerch: false,
				merchName: '',
				myMerchList: [], //商户列表数据
				type: 'merch' ,//preMerch : 平行代理商户 :  ,merch 普通商户
				agentTypeList:[
					{
						name:'直属商户',
						value:2
					},
					{
						name:'团队商户',
						value:1
					}
				],
				showAgentTypePicker:false,
				agentTypeName:'团队商户',
			};
		},
		onLoad(o) {
			this.type = o.type || 'merch';
			// this.navIndex = o.type || 0;
			// this.query.policyCode = o.policyCode;
			// let item = this.policyList.find((item) => item.policyCode == o.policyCode);
			// if (item) {
			//   this.query.policyName = item.policyName;
			// }
			switch (this.type) {
				case 'pre':
					uni.setNavigationBarTitle({
						title: '平行代理商户信息查询'
					});
					break;
				default:
					break;
			}
			this.getList();
		},
		computed: {
			policyList() {
				return this.$store.getters.policyList || [];
			}
		},
		methods: {
			async toUpdateFee(data) {
				//查询机具表
				let params = {
					pageNum: 1,
					pageSize: 10,
					policyName: data.policyName,
					policyCode: data.policyCode,
					serialno: data.serialno
				};
				let termData = await termList(params);
				let list = termData.rows;
				this.$storage.setStore('merchDetail', data);
				this.$storage.setStore('termData', list[0]);
				uni.navigateTo({
				    url: '/pages/home/home/updateRate'
				});
			},
			async toFeeRateDetail(data) {
				//查询机具表
				let params = {
					pageNum: 1,
					pageSize: 10,
					policyName: data.policyName,
					policyCode: data.policyCode,
					serialno: data.serialno
				};
				let termData = await termList(params);
				let list = termData.rows;
				getCtTermById(list[0].id).then(res => {
					if (res.code==200 && res.data) {
						 this.$storage.setStore('channleCodes', data.channelCode);
						 this.$storage.setStore('changeMercDetail', res.data);
						 this.$nav.push({
						 	path: '/pages/home/policy/changeMercDetail?type=merch'
						 });
					}else{
						this.$storage.setStore('channleCodes', data.channelCode);
						this.$storage.setStore('changeMercDetail', list[0]);
						this.$nav.push({
							path: '/pages/home/policy/changeMercDetail?type=merch'
						});
					}
					 this.$storage.setStore('merchDetail', data);
				});
			},
			async querySelectList(query) {
				let params = {
					pageNum: 1,
					pageSize: 99,
					name: query,
				};
				let res = await merchGetByName(params);
				let list = res.data.map((item) => {
					if (item.merchName) {
						item.merchName = `${item.merchName}(${item.merchNo})`;
					} else {
						item.merchName = `${item.merchNo}(${item.merchNo})`;
					}
					return item;
				});
				this.myMerchList = list
			},
			async merchHandel() {
				await this.querySelectList(this.query.merchName);
				if (this.myMerchList.length == 0) {
					return this.$tip.toast('暂未搜索到该商户!')
				}
				this.showMerch = true;

			},
			chooseTime(type) {
				this.timePicker = true;
				this.chooseType = type;
				if (type == 'start') {
					this.defaultTime = this.query.bindTimeStart;
				} else {
					this.defaultTime = this.query.entDate;
				}
			},
			toDetail(item) {
				this.$storage.setStore('merchDetailInfo', item);
				this.$nav.push({
					path: '/pages/home/home/detailInfo'
				});
			},
			onPolicyConfirm(e) {
				console.log(e);
				this.query.policyCode = this.policyList[e[0]].policyCode;
				this.query.policyName = this.policyList[e[0]].policyName;
				// this.chooseIndex = e[0];
			},
			onAgentTypeConfirm(e){
				this.query.agentType = this.agentTypeList[e[0]].value;
				this.agentTypeName = this.agentTypeList[e[0]].name;
			},
			onMerchConfirm(e) {
				this.query.merchNo = this.myMerchList[e[0]].merchNo;
				this.query.merchName = this.myMerchList[e[0]].merchName;
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
					this.refreshLoad();
				});
			},
			resetHandle() {
				this.typename = '全部';
				this.query = {
					pageNum: 1,
					pageSize: 20
				};
			},
			queryHandle() {
				this.$forceUpdate();
				this.init();
				this.filterPopup = false;
			},
			pickerConfirmHandle(item) {
				if (this.chooseType == 'start') {
					this.query.bindTimeStart = `${item.year}-${item.month}-${item.day}`;
				} else {
					this.query.bindTimeEnd = `${item.year}-${item.month}-${item.day}`;
				}
				this.timePicker = false;
			},
			changeEChartType() {
				this.filterPopup = true;
			},
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.query
				};
				// if (params.agentNo) {
				// 	params.agentType = 2
				// } else {
				// 	params.agentType = 1
				// }
				merchBindTermList(params).then(res => {
					var list = res.rows;
					this.totalNum = res.total;
					this.loadMoreStatusDeal(list);
					if (list.length > 0) {
						this.list = this.list.concat(list);
					}
				});

			},
			reachBottomCallBack() {
				this.getList();
			}
		}
	};
</script>
<style scoped lang="scss">
	.container {
		padding: R(25);
	}

	.list {
		// background: #fff;
		// border-radius: R(10);

		.filter {
			padding: R(20);
			font-size: R(24px);
			font-weight: 400;
			color: #666666;
			margin-bottom: R(20);

			.time-box {
				font-size: R(26);
			}

			.icon-xiajiantou {
				font-size: R(24);
				margin-left: R(14);
			}
		}
	}

	.total {
		font-size: R(24);
		font-weight: 400;
		color: #737373;
		margin-bottom: R(20);

		.blue {
			color: #4286f5;
		}
	}

	.item {
		// margin: R(25) R(0);
		// padding: R(14) R(28) R(24);
		border-bottom: 1px solid #eee;
		background: #fff;
		border-radius: $uni-border-radius-lg;
		margin-bottom: $uni-spacing-col-lg;

		.title {
			font-size: R(30);
			font-weight: bold;
			color: #1a1a1a;

			/deep/.u-cell__value {
				color: #1a1a1a;
			}
		}

		/deep/.u-cell {
			padding: R(10) R(0);

			.u-cell__value {
				text-align: left;
			}
		}
	}
	.item-title{
		padding: $uni-spacing-row-lg;
		border-bottom: 1px solid #eee;
	}
	.item-content{
		padding: $uni-spacing-row-lg;
	}

	.filter-body {
		padding: R(30);

		.f-title {
			font-size: R(30);
			text-align: center;
			font-weight: 400;
			color: #999;
		}
	}

	.filter-content {
		margin-bottom: R(30);

		.duble-input {
			border-bottom: 1px solid #eee;

			.text {
				width: R(140);
				white-space: nowrap;
				padding: 0 R(28);
			}
		}
	}

	.filter-body .footer-btn {
		display: flex;
		/*position: absolute;*/
		bottom: 0;
		width: 100%;
	}

	.filter-body .footer-btn .btn-left {
		width: 30%;
		margin-left: 15%;
	}

	.filter-body .footer-btn .btn-right {
		width: 30%;
		margin-left: 10%;
	}

	.filter-body .filter-tiem {
		margin-bottom: R(25);
	}

	.filter-body .filter-tiem .tit {
		font-size: R(32);
		color: #333;
	}

	.filter-body .filter-tiem .select-list .select-item {
		float: left;
		width: 33%;
		padding: R(20) R(10);
	}

	.icon-xiajiantou {
		font-size: R(24);
		margin-left: R(14);
	}
	.myBtn{
		background: $button-linear-bg;
	}
	
	.register-btn-box{
		padding: $uni-spacing-row-lg;
		border-top: 1px solid #ddd;
		display: flex;
		justify-content: end;
	}
	
	.btn-box {
		width: R(160);
		height: R(50);
		line-height: R(50);
		// background: #d9e7ff;
		border-radius: R(30);
		// color: #4286f5;
		color: #fff;
		background: $button-linear-bg;
		text-align: center;
		display: inline-block;
		// position: absolute;
		right: R(10px);
		margin-left: R(20px);
		top: 43%;
		font-size: $uni-font-size-sm;
		.unBind{
			font-size: $uni-font-size-sm;
		}
	}
</style>